<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="userInfo h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="编辑个人信息" left-icon="left" @clickLeft="back" />
    </view>
    <view :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view class="flca avatarBox">
          <u-avatar v-if="formData.avatarUrl" class="avatar xx" size="140" :src="formData.avatarUrl" @click="avatarChoose" />
          <u-avatar v-else class="avatar aa" size="140" :src="avatarUrl" @click="avatarChoose" />
        </view>
        <view class="common_form">
          <uni-forms ref="form" :modelValue="formData" class="">
            <uni-forms-item label="昵称" label-width="100px" name="contact">
              <view class="flr fla flb">
                <input type="text" v-model="formData.nickName" class="input" placeholder="请输入昵称" />
              </view>
            </uni-forms-item>
            <view class="content_line"></view>
            <uni-forms-item label="性别" label-width="100px" name="gender">
              <view class="flr fla h100p">
                <u-radio-group v-model="formData.gender">
                  <u-radio :labelDisabled="false" activeColor="#ff7c00" name="male">
                    <text class="w80" style="#606266">男性</text>
                  </u-radio>
                  <u-radio :labelDisabled="false" activeColor="#ff7c00" name="female">
                    <text class="w80" style="#606266">女性</text>
                  </u-radio>
                </u-radio-group>
              </view>
            </uni-forms-item>
            <view class="content_line"></view>
            <view class="phone_content">
              <uni-forms-item label="手机号" label-width="100px" name="phoneNumber">
                <view class="flr fla flb">
                  <input type="text" v-model="formData.phoneNumber" class="input" placeholder="请输入手机号" maxlength="11" />
                  <SMSCountdown v-if="globalData.userInfo.phoneNumber !== formData.phoneNumber" :phoneNumber="formData.phoneNumber" :totalSeconds="60"></SMSCountdown>
                </view>
              </uni-forms-item>
              <view v-if="globalData.userInfo.phoneNumber !== formData.phoneNumber" class="warning_desc">
                <uni-icons type="info" size="29"></uni-icons>
                更换为非授权手机号时，需要填写验证码</view
              >
            </view>
            <view v-if="globalData.userInfo.phoneNumber !== formData.phoneNumber" class="content_line"></view>
            <uni-forms-item v-if="globalData.userInfo.phoneNumber !== formData.phoneNumber" label="验证码" label-width="100px" name="verificationCode">
              <view class="flr fla flb">
                <input type="text" v-model="formData.verificationCode" class="input" placeholder="请输入验证码" />
              </view>
            </uni-forms-item>
            <view class="content_line"></view>
          </uni-forms>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" btnText="提交" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import SMSCountdown from '@/component/SMSCountdown.vue';
import commonMxins from '@/mixins/common.js';
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
const api = require('@/utils/request.js');
export default {
  mixins: [commonMxins],
  components: { SMSCountdown, FixedBottomBtn },
  data() {
    return {
      value: 'male',
      showFixedBottom: true,
      name: '李先生',
      avatarUrl: 'https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/male.png',
      formData: {
        avatarUrl: '',
        nickName: '',
        verificationCode: '',
        safePhoneNumber: '',
        phoneNumber: '',
        gender: 'male'
      }
    };
  },
  onShow() {
    this.formData = { ...this.formData, ...this.globalData.userInfo };
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async submit() {
      if (this.formData.phoneNumber && this.formData.nickName) {
        let resp = await api.request({ url: '/appUser/updateAppUser', data: { ...this.formData } });
        if (resp.code === 200) {
          uni.showToast({ title: '更新成功', icon: 'success', duration: 1500 });
          await this.$async.delay(2000);
          this.getUserInfo();
          uni.navigateBack({ delta: 1 });
        }
      } else {
        uni.showToast({ title: '请先填全信息', icon: 'none', duration: 1500 });
      }
    },
    avatarChoose() {
      let t = this;
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        camera: 'back',
        success(res) {
          //临时地址转二进制
          wx.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].tempFilePath,
            success: async function (res) {
              //二进制转base64
              let base64 = wx.arrayBufferToBase64(res.data);
              let fileBase64 = 'data:image/jpeg;base64,' + base64;
              let resp = await api.request({ url: '/oss/upload', data: { fileBase64 } });
              t.formData.avatarUrl = resp.data.url;
            },
            fail: function (error) {
              console.error('读取文件流失败2：', error);
            }
          });
        },
        fail: function (error) {
          console.error('读取文件流失败1：', error);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.userInfo {
  .avatarBox {
    height: 200rem;
    width: 100%;
    .avatar {
      // height: 100rem;
      // width: 100rem;
    }
  }
  .common_form /deep/ {
    .uni-forms-item {
      width: 402rem;
      padding: 0 14rem;
      height: 60rem;
      margin-bottom: 0;
    }
    .uni-forms-item__label {
      height: 60rem !important;
      font-size: 16rem !important;
      color: rgba(56, 56, 56, 1) !important;
      text-align: left;
      line-height: 60rem !important;
    }
    .uni-forms-item__content {
      input {
        height: 60rem;
        width: calc(100% - 50rem);
      }
      .uni-icons {
        color: rgba(166, 166, 166, 1) !important;
      }
      text {
        font-size: 14rem;
        font-weight: 400;
        color: rgba(166, 166, 166, 1);
      }
    }
  }
  // 表单间距下划线
  .content_line {
    width: 430rem;
    height: 0rem;
    border-top: 1rem solid rgba(229, 229, 229, 1);
  }
  // 手机号校验提示

  .phone_content {
    position: relative;
    .warning_desc {
      position: absolute;
      bottom: 0rem;
      left: 14rem;
      font-size: 10rem;
      font-weight: 400;
      line-height: 14rem;
      vertical-align: top;
      color: rgba(255, 180, 110, 1);
      /deep/ .uniui-info {
        font-size: 14rem !important;
        color: rgba(255, 180, 110, 1) !important;
      }
    }
  }
  // 通用表单文字样式
  .common_form_label_style {
    font-size: 16rem;
    font-weight: 700;
    line-height: 45rem;
    padding-right: 10rem;
    color: rgba(56, 56, 56, 1);
  }
  .footer {
    width: calc(100% - 24rem);
    margin-top: 20rem;
    padding: 12rem 12rem;
    height: 44rem;
    box-sizing: border-box;
    background: #ff7c00;
    color: #ffffff;
    font-size: 16rem;
    line-height: 24rem;
    margin: 0 auto;
    text-align: center;
    border-radius: 50rem;
  }
  .fui-text {
    margin-left: 6rem;
  }
}
</style>
